<template>
  <el-dialog width="600px" :title="dialogTitle" :visible.sync="dialogVisible" @close="handleClose">
    <el-form
      ref="submitForm"
      v-loading="formLoading"
      :model="submitForm"
      :rules="submitFormRules"
      label-position="right"
      label-width="80px"
      class="submit-form"
    >
      <el-form-item label="上级菜单" prop="parentId">
        <el-cascader
          v-model="submitForm.parentId"
          :options="menuOptions"
          :props="{ checkStrictly: true ,value:'id',label:'menuName',emitPath: false}"
          style="width: 100%"
          clearable
          @change="parentChange"
        >
          <template slot-scope="{ node, data }">
            <span>{{ data.menuName }}</span>
          </template>
        </el-cascader>
      </el-form-item>
      <el-form-item label="菜单类型" prop="menuType">
        <dict-select v-model="submitForm.menuType" type="radio" dict-key="menu_type" style="width:100%" placeholder="请选择菜单类型" />
      </el-form-item>
      <el-form-item :label="submitForm.menuType==='0'?'菜单名称':'按钮名称'" prop="menuName">
        <el-input v-model="submitForm.menuName" placeholder="请输入菜单名称" />
      </el-form-item>
      <el-form-item label="显示状态" prop="state">
        <el-switch
          v-model="submitForm.state"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="可用"
          inactive-text="禁用"
          active-value="1"
          inactive-value="0"
        />
        <!--        <el-radio-group v-model="submitForm.state">
          <el-radio label="1">显示</el-radio>
          <el-radio label="0">隐藏</el-radio>
        </el-radio-group>-->
      </el-form-item>
      <el-form-item v-if="submitForm.menuType==='0'" label="路由地址" prop="path">
        <el-input v-model="submitForm.path" placeholder="请输入路由地址" />
      </el-form-item>
      <el-form-item v-if="submitForm.menuType==='0'" label="图标" prop="icon">
        <el-input v-model="submitForm.icon" clearable placeholder="请选择菜单图标" @click="iconSelectClick">
          <el-button slot="append" class="el-icon-search" @click="iconSelectClick" />
        </el-input>
      </el-form-item>
      <el-form-item v-if="submitForm.menuType==='0'&&!submitForm.id" label="默认权限" prop="autoCreatePerm">
        <el-switch
          v-model="submitForm.autoCreatePerm"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="创建"
          inactive-text="不创建"
          :active-value="1"
          :inactive-value="0"
        />
      </el-form-item>
      <el-form-item v-if="submitForm.menuType==='1'" label="权限字符" prop="path">
        <el-input v-model="submitForm.path" placeholder="请输入权限字符" />
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="submitForm.sort" :min="0" placeholder="请输入排序" style="width:100%" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button :loading="formLoading" type="text" @click="handleClose">取消</el-button>
      <el-button :loading="formLoading" type="primary" @click="handleSubmit">提交</el-button>
    </span>
    <el-dialog title="选择图标" width="800px" append-to-body :visible.sync="iconVisible">
      <icon-select v-if="iconVisible" @closeClick="chooseIcon" />
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="iconVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { saveMenu, updateMenu, selectMenuTree, selectMenuById } from '@/api/system/menu'
import { iconsList } from '@/utils/icon'
/**
 * @author yizuomin
 * @date 2023/5/7 19:05
 **/
export default {
  name: 'SubmitModule',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      dialogTitle: '',
      formLoading: false,
      iconsList: iconsList,
      iconVisible: false,
      menuOptions: [],
      submitForm: {
        id: undefined,
        parentName: '',
        parentId: '',
        menuName: '',
        menuType: '0',
        isFrame: false,
        state: '1',
        icon: '',
        path: '',
        sort: '',
        autoCreatePerm: 1
      },
      submitFormRules: {
        menuName: [{ required: true, message: '请输入菜单名称', trigger: 'change' }],
        path: [{ required: true, message: '请输入路由地址', trigger: 'change' }],
        sort: [{ required: true, message: '请输入排序', trigger: 'change' }]
      }
    }
  },
  methods: {
    init(parent, id) {
      this.getMenuTree()
      if (parent) {
        this.submitForm.parentId = parent.id
        this.submitForm.parentName = parent.menuName
      }
      if (!id) {
        this.dialogTitle = '新增菜单'
        return
      }
      this.dialogTitle = '修改菜单'
      this.formLoading = true
      selectMenuById(id).then(resp => {
        if (resp.success) {
          this.submitForm = resp.data
        }
      }).finally(() => {
        this.formLoading = false
      })
    },
    handleSubmit() {
      this.$refs.submitForm.validate((valid) => {
        if (valid) {
          let request = saveMenu
          if (this.submitForm.id) {
            request = updateMenu
          }
          this.formLoading = true
          request(this.submitForm).then(resp => {
            if (resp.success) {
              this.$message.success('操作成功')
              this.$refs.submitForm.resetFields()
              this.handleClose()
            }
          }).finally(() => {
            this.formLoading = false
          })
        }
      })
    },
    getMenuTree() {
      selectMenuTree({}).then(resp => {
        this.menuOptions = resp.data
      })
    },
    iconSelectClick() {
      this.iconVisible = true
    },
    chooseIcon(icon) {
      this.iconVisible = false
      this.submitForm.icon = icon
    },
    handleClose() {
      this.$emit('close')
    },
    parentChange(val) {
      this.submitForm.parentId = val
    }
  }
}
</script>

<style scoped>

</style>
